<script setup lang="ts" name="consultServer">
// 咨询
import { http } from "@/utils/http";
import { onMounted, ref, watch } from "vue";
import {gotoBack, ImagePreview, JumpServiceCall, useThrottleFn} from "@/utils/common";
import {showToast, showLoadingToast, closeToast, showSuccessToast, showFailToast} from "vant";

const imageList = ref([])
const name = ref()
const mobile = ref()
const content = ref()

const onSubmit = useThrottleFn(() => {
  // 保存
  if (!name.value || !mobile.value || !content.value) return showToast('请先完善表单内容');
  let data = {
    name: name.value,
    mobile: mobile.value,
    content: content.value,
    pics: imageList.value
  }
  console.log(data);
  http.post(`consult`, data).then(({ code, data }: any) => {
    if (code === 0) {
      showSuccessToast('提交成功');
      setTimeout(() => {
        closeToast();
        gotoBack();
      }, 1200);
    }
  });
}, 500);

const onSuccess = (val: any) => {
  if(imageList.value.length>8){
  return showFailToast('最多可上传9张照片')
  }
  imageList.value.push(val);
};
const deleteImage = (index: any) => {
  imageList.value.splice(index,1);
};
onMounted(() => {
});
</script>
<template>
  <div class="page">
    <van-nav-bar title="梅林水库咨询服务" class="nborder">
      <template #left>
        <img src="@/icons/icon/return.png" alt="" class="icon36" @click="gotoBack()" />
      </template>
    </van-nav-bar>
    <van-image src="https://myicellar-images.oss-cn-hongkong.aliyuncs.com/202406/26/0f16fa4e30e8e2cae9c63c29da67060b.png" class="nav_bg _fixed"></van-image>
    <div class="_content f-fbc">
      <div class="marginT32">
        <p class="font44 bold_6 color1D ">事项咨询</p>
        <p class="font24 line45 color86 marginT24 _text"  style="letter-spacing: 1px;">请留下您想咨询的事项，我们将第一时间回复</p>
      </div>
      <van-image src="https://myicellar-images.oss-cn-hongkong.aliyuncs.com/202406/26/6fd94cd7a836f26adc3c2153c5cb1bf3.png" class="_iconV2"></van-image>
    </div>
    <div class="_intro_t d_box color1D font28 bold_4">
     <div>
       <div class="f-fc"> <span style="color:#F53F3F;" class="marginR8">*</span> <span class="font28 bold_6">姓名</span></div>
       <van-field  class="_input marginT6" v-model="name" placeholder="怎么称呼您？" ></van-field>
     </div>
      <div class="marginT48">
       <p class="f-fc"> <span style="color:#F53F3F;" class="marginR8">*</span> <span class="font28 bold_6">联系方式</span></p>
       <van-field  class="_input marginT6" v-model="mobile"  placeholder="您的联系方式是？"></van-field>
     </div>
      <div  class="marginT48">
       <p class="f-fc"> <span style="color:#F53F3F;" class="marginR8">*</span> <span class="font28 bold_6">咨询事项</span></p>
       <van-field  class="_input marginT6" v-model="content"  placeholder="请输入您想咨询的事项" type="textarea" rows="4"></van-field>
     </div>
      <div  class="marginT48">
        <p class="f-fc" style="width: 50%"> <span class="font28 bold_6">图片上传</span></p>
        <div class="grid_pic marginT6">
          <uploadPicture @on-success="onSuccess" style="width: 100%;height: 90px;" class=" _imgBox">
            <van-image src="https://myicellar-images.oss-cn-hongkong.aliyuncs.com/202406/26/9869d994a818db2c70c0d85feb233b0b.png" class="_image"></van-image>
          </uploadPicture>
          <div class="_imgBox _relative" v-for="(item,index) of imageList"><van-image :src="item" class="_image" fit="cover" @click="ImagePreview([item])"></van-image>
            <van-image src="https://myicellar-images.oss-cn-hongkong.aliyuncs.com/202406/26/ef7ecf7fe24f4d5cafce2b54d82f86fc.png" class="_icon" @click="deleteImage(index)"></van-image>
          </div>
        </div>
      </div>
      <div class="f-fbc paddingT48" >
        <div class="_cancel f-fcc  font28 bold_6 color0" @click="gotoBack">返回</div>
        <div class="_confirm font28 bold_6 colorff f-fcc" @click="onSubmit">确认提交</div>
      </div>
    </div>
  </div>

</template>

<!-- 样式层 -->
<style scoped lang="less">

.page{
  background: #f7f8f9;
  min-height: 100vh;
  z-index: 2;
  position: relative;
  padding-bottom: 28px;
  ._imgBox{
    width: 180px;
    height: 180px;
    ._image{
      width: 180px;
      height: 180px;
      border-radius: 12px;
      overflow: hidden;
    }
    ._icon{
      width: 36px;
      height: 36px;
      position: absolute;
      right: -18px;
      top: -18px;
      z-index: 99;
    }
  }

  ._cancel{width: 284px;
    height: 84px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 2px solid #E5E6E8;
  }
  ._confirm{width: 284px;
    height: 84px;
    background: #3491FA;
    border-radius: 14px;
  }
  .grid_pic {
    display: grid;
    grid-template-columns: 180px 180px 180px;
    grid-template-rows: auto auto auto;
    grid-gap: 22px;
    row-gap: 24px;
    .item {
      //grid-column: 3;
      //grid-row: 1 / span 3;
    }
  }
  ._input{
    width: 606px;
    border-radius: 16px;
    border: 2px solid rgba(134,144,156,0.24);
  }
  ._intro_t{
    padding: 44px 48px;
    width: 686px;
    background: #FFFFFF;
    border-radius: 24px;
    margin: 44px auto;line-height: 60px;
    letter-spacing: 2px;
    text-align: justify;
    font-style: normal;
  }
  ._intro{
    padding: 44px 32px 0 32px;
    position: relative;
    &::before {
      width: 168px;
      height: 20px;
      background: linear-gradient( 270deg, rgba(52,145,250,0) 0%, #3491FA 100%);
      border-radius: 6px;
      opacity: 0.68;
      position: absolute;
      bottom: 0;
      content: '';
    }
  }
  ._content{
    margin-top: 38px;
    padding: 0 62px;
    ._text{
      width: 376px;
    }
    ._iconV2{
    width: 212px;
  }
  }
  .van-nav-bar {
    background: none;
  }
  .van-hairline--bottom:after {
    border-bottom-width: 0;
  }

  .nav_bg {
    width: 750px;
    height: auto;
    z-index: -1;
  }
}
</style>
